<template>
  <TokenExpiredDialog
    v-model="showDialog"
    @login-success="handleLoginSuccess"
    @login-cancel="handleLoginCancel"
    @later="handleLater"
  />
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import TokenExpiredDialog from './index.vue';
import { useTokenExpiredStore } from '@/store/modules/tokenExpired';

const tokenExpiredStore = useTokenExpiredStore();

// 直接使用computed响应式绑定store状态，无需事件监听
const showDialog = computed({
  get: () => tokenExpiredStore.isShowingTokenDialog,
  set: (value) => {
    if (!value) {
      tokenExpiredStore.handleDialogLoginCancel();
    }
  }
});

// 处理登录成功
const handleLoginSuccess = () => {
  tokenExpiredStore.handleDialogLoginSuccess();
};

// 处理登录取消
const handleLoginCancel = () => {
  tokenExpiredStore.handleDialogLoginCancel();
};

// 处理稍后登录
const handleLater = () => {
  tokenExpiredStore.handleDialogLoginCancel();
};
</script>